<template>
  <div class="verification-code">
    <input type="text" placeholder="验证码" @input="handleVerificationCode" />
    <img :src="captchaAddress" alt="" />
    <div class="tips">
      <span class="unclear">看不清</span>
      <span class="barter" @click="handleImgBarter">换一张</span>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      verificationCode: "", //保存验证码
    };
  },
  props: {
    captchaAddress: {
      type: String,
      default: "",
    },
  },
  methods: {
    handleImgBarter() {
      this.$bus.$emit("handleImgBarter");
    },

    handleVerificationCode(e) {
      this.verificationCode = e.target.value;
      this.$emit('handleVerificationCode',this.verificationCode)
    },
  },
};
</script>
<style lang="less" scoped>
input {
  border: none;
}
.verification-code {
  display: flex;
  justify-content: space-between;
  position: relative;
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  background-color: #fff;
  img {
    position: absolute;
    top: 50%;
    right: 80px;
    transform: translateY(-50%);
  }
  .tips {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 12px;
    span {
      display: block;
    }
    .barter {
      margin-top: 5px;
      color: #9395e9;
    }
  }
}
</style>
